<template>
  <div class="main">
    <el-form
      id="formLogin"
      class="user-layout-login"
      ref="loginForm"
      :rules="loginRules"
      :model="mdl"
    >
      <el-tabs v-model="customActiveKey" stretch @tab-click="handleTabClick">
        <el-tab-pane label="账号密码登录" name="tab1">
          <el-alert
            v-if="isLoginError"
            type="error"
            show-icon
            style="margin-bottom: 24px;"
            title="账户或密码错误（admin/admin）"
          />
          <el-form-item prop="username">
            <el-input
              size="large"
              type="text"
              placeholder="账户: admin"
              v-model="mdl.username"
              name="username"
              auto-complete="on"
            >
              <i class="el-icon-user el-input__icon" slot="prefix"> </i>
            </el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              size="large"
              :type="pwdType"
              placeholder="密码: admin"
              v-model="mdl.password"
              name="password"
              @keyup.enter.native="handleLogin"
            >
              <i class="el-icon-lock el-input__icon" slot="prefix"> </i>
              <i slot="suffix" @click="showPwd">
                <svg-icon v-if="pwdType === 'password'" icon-class="eyeclose" />
                <svg-icon v-if="pwdType === 'text'" icon-class="eye"></svg-icon>
              </i>
            </el-input>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="手机号登录" name="tab2">
          <el-form-item>
            <el-input
              size="large"
              type="text"
              placeholder="手机号"
              v-model="mdl.mobile"
              auto-complete="on"
            >
            </el-input>
          </el-form-item>

          <el-row :gutter="16">
            <el-col class="gutter-row" :span="16">
              <el-form-item>
                <el-input
                  size="large"
                  type="text"
                  placeholder="验证码"
                  v-model="mdl.captcha"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col class="gutter-row" :span="8">
              <el-button
                class="getCaptcha"
                tabindex="-1"
                :disabled="state.smsSendBtn"
                @click.stop.prevent="getCaptcha"
                v-text="
                  (!state.smsSendBtn && '获取验证码') || state.time + ' s'
                "
              ></el-button>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>

      <el-form-item>
        <el-checkbox v-model="mdl.rememberMe">自动登录</el-checkbox>
        <router-link
          :to="{ name: 'recover', params: { user: 'aaa' } }"
          class="forge-password"
          style="float: right;"
          >忘记密码</router-link
        >
      </el-form-item>

      <el-form-item style="margin-top:24px">
        <el-button
          size="large"
          type="primary"
          class="login-button"
          :loading="state.loginBtnLoading"
          :disabled="state.loginBtnLoading"
          @click="handleLogin"
          >确定</el-button
        >
      </el-form-item>

      <div class="user-login-other">
        <span>其他登录方式</span>
        <a>
          <el-icon class="item-icon" type="alipay-circle"></el-icon>
        </a>
        <a>
          <el-icon class="item-icon" type="taobao-circle"></el-icon>
        </a>
        <a>
          <el-icon class="item-icon" type="weibo-circle"></el-icon>
        </a>
      </div>
    </el-form>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  data() {
    return {
      customActiveKey: 'tab1',
      loginType: 0,
      isLoginError: false,
      requiredTwoStepCaptcha: false,
      stepCaptchaVisible: false,
      state: {
        time: 60,
        loginBtnLoading: false,
        loginType: 0,
        smsSendBtn: false
      },
      mdl: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 3, message: '用户名不少3个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 3, message: '密码不少3个字符', trigger: 'blur' }
        ]
      },
      pwdType: 'password',
      redirect: undefined
    };
  },
  methods: {
    ...mapActions('user', ['Login']),
    showPwd() {
      if (this.pwdType === 'password') {
        this.pwdType = 'text';
      } else {
        this.pwdType = 'password';
      }
    },
    // handler
    handleUsernameOrEmail(rule, value, callback) {
      const { state } = this;
      const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
      if (regex.test(value)) {
        state.loginType = 0;
      } else {
        state.loginType = 1;
      }
      callback();
    },
    handleTabClick(tab, event) {
      this.customActiveKey = tab.name;
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.state.loginBtnLoading = true;
          this.Login(this.mdl)
            .then(() => {
              this.$router.push({ path: this.redirect || '/' });
              this.state.loginBtnLoading = false;
            })
            .catch((err) => {
              this.state.loginBtnLoading = false;
              if (err && !err.isSuccess) {
                this.isLoginError = true;
                setTimeout(() => {
                  this.isLoginError = false;
                }, 3000);
              }
            });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.user-layout-login {
  label {
    font-size: 14px;
  }

  .getCaptcha {
    display: block;
    width: 100%;
    height: 40px;
  }

  .forge-password {
    font-size: 14px;
  }

  button.login-button {
    padding: 0 15px;
    font-size: 16px;
    height: 40px;
    width: 100%;
  }

  .user-login-other {
    text-align: left;
    margin-top: 24px;
    line-height: 22px;

    .item-icon {
      font-size: 24px;
      color: rgba(0, 0, 0, 0.2);
      margin-left: 16px;
      vertical-align: middle;
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        color: #1890ff;
      }
    }

    .register {
      float: right;
    }
  }
}
</style>
